<script setup lang="ts">
import {defineProps, onBeforeMount, onMounted, reactive} from 'vue'
import {get,deLete} from '@/assets/ts/ruquestMethod'
import type {AddressData, Address, Account, Order, Cart} from "@/assets/ts/Interfaces";
const props = defineProps({
  username : String
})
let orders = reactive({
  data : [{
    id : 0,
    username : '',
    descn : '',
    productid : '',
    itemId : '',
    num : 0,
    total_cost : 0,
    address: "",
    productname: "",
    isdelivery: 0
  }]
})

const getOrder = () =>{
  get('/orders',
      (data:any) =>{
        console.log(data)
        orders.data = data.data
      })
}

const handleDelete = (index: number, row: Order) => {
  deLete(`/orders/${row.id}`, ()=>{
    getOrder()
  })
}
onBeforeMount(() =>{
  getOrder()
})
</script>

<template>
  <h2>用户订单</h2>
  <el-table stripe :data="orders.data" style="width: 100%">
    <el-table-column prop="id" label="id" width="120" />
    <el-table-column prop="username" label="用户名" width="120" />
    <el-table-column  width="120" >
      <template #default="scope">
        <el-image :src="scope.row.descn"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="productname" label="商品名"  />
    <el-table-column prop="itemid" label="物品id" width="120" />
    <el-table-column prop="num" label="数量" width="120" />
    <el-table-column prop="totalcost" label="总价" width="120" />
    <el-table-column prop="address" label="地址"  />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>